// Default variables
html {
  --base-font-size: 16px;
  --base-font-family: 'Roboto Slab', 'Noto Serif SC', serif, -apple-system, BlinkMacSystemFont, Segoe UI,
    Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc,
    sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji,
    Segoe UI Emoji;
  --title-font-family: 'Roboto Slab', 'Noto Serif SC', serif, -apple-system, BlinkMacSystemFont, Segoe UI,
    Helvetica, Arial, pingfang sc, source han sans sc, noto sans cjk sc,
    sarasa gothic sc, microsoft yahei, sans-serif, Apple Color Emoji,
    Segoe UI Emoji;
  --monospace-font-family: 'Fira Code', SF Mono, Consolas, Monaco, 'Ubuntu Mono',
    monospace;
}

// Light default theme
body {
  --bg-color: #f6f7f8;
  --bg-color-rgb: 246, 247, 248;
  --bg-content-color: #fff;
  --bg-code: #f1f3f4;
  --text-code: #d400ff;
  --text-code-block: #37474f;
  --body-color: #000000;
  --title-color: #000000;
  --link-color: #0070f3;
  --border-color: rgba(0, 0, 0, 0.1);
  --selection-color: #79ffe1;
  --social-steam-color: #1B2838;
  --space: 3.5rem;
  --content-width: 860px;
  --header-height: 60px;
  --radius: 5px;
  --toast-width: 400px;
  --shadow-small: 1px 1px 10px 0 rgba(0, 0, 0, 0.2),
    1px 1px 30px 0 rgba(0, 0, 0, 0.3);
}

// Make things smaller for mobile
@media screen and (max-width: 650px) {
  html {
    --base-font-size: 16px;
  }
  body {
    --space: 1.3rem;
    --header-height: 60px;
    --toast-width: 280px;
  }
}

// Override variables for Dark theme
body[data-theme='dark'] {
  --bg-color: #101213;
  --bg-color-rgb: 16, 18, 19;
  --bg-content-color: #2d3235;
  --bg-code: #1e2224;
  --text-code-block: #fff;
  --border-color: rgba(255, 255, 255, 0.1);
  --body-color: #ced8de;
  --title-color: #fff;
  --link-color: #0070f3;
  --text-code: #df41ff;
  --social-steam-color: #bebcba;
}
